<script setup>
import { ref } from 'vue'
import { listFlow } from '@/api/dashboard'
const popup = ref(null)
function open() {
  popup.value.open()
  listFlow({
    pageNum: 1,
    pageSize: 10,
    type: 1,
  }).then((res) => {
    flow.value = res.rows
  })
}
defineExpose({ open })
const flow = ref([])
</script>

<template>
  <Popup width="1530" height="695.49" ref="popup" title="天台茶传播">
    <div class="box wrap">
      <div class="flex-center box" v-for="(item, index) in flow" :key="item.id">
        <div class="item">
          <div class="content flex-center">{{ item.brief }}</div>
          <p>{{ item.name }}</p>
        </div>
        <div class="right" v-if="(index + 1) % 4 != 0"></div>
      </div>
    </div>
  </Popup>
</template>

<style lang="scss" scoped>
.box {
  display: flex;
  flex-wrap: wrap;
}
.content {
  width: 258px;
  height: 154px;
  background: #1e3d5a;
  border-radius: 0px 0px 0px 0px;
  border: 2px solid #158fff;
  font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
  font-size: 16px;
  color: #bfe0ff;
  line-height: 19px;
  text-align: center;
}
.box {
  margin-bottom: 50px;
}
.item p {
  margin-top: 16px;
  width: 258px;
  font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
  font-size: 18px;
  color: #ffffff;
  line-height: 21px;
  text-align: center;
}
.right {
  background: url(/src/assets/img/process/right.png) no-repeat;
  width: 80px;
  height: 80px;
  margin-left: 20px;
  margin-bottom: 60px;
  margin-right: 19px;
}
</style>
